<template>
  <div id="app">
    <!-- <Top></Top> -->
    <keep-alive>
      <div class="box22" :style="opacityStyle">
        <span class="iconfont icon-right-angle-copy"></span>
        <p class="k">有品总榜</p>
        <span class="iconfont icon-fenxiang2-copy-copy" @click="Fnan"></span>
        <!-- <van-popup v-model="show" closeable position="top" :style="{ height: '200px' }">撒大苏打撒旦</van-popup> -->
      </div>
    </keep-alive>
    <Header></Header>
    <Cons></Cons>
    <Sort></Sort>
    <Recommend></Recommend>
    <Fenxiang ref="fx"></Fenxiang>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Cons from "../components/Cons.vue";
import Sort from "../components/Sort.vue";
import Recommend from "../components/Recommend.vue";
import Fenxiang from "../components/fenxiang.vue";
export default {
  name: "Index",
  components: {
    Header,
    Cons,
    Recommend,
    Fenxiang,
    Sort,
  },
  data() {
    return {
      show: false,
      opacityStyle: { opacity: 0 },
    };
  },
  mounted() {
    window.addEventListener("scroll", this.box22Scroll);
  },
  methods: {
    Fnan() {
      this.$refs.fx.showShare = true;
    },
    // 导航标题透明度联动变化
    box22Scroll() {
       //console.log(1)
      const top = document.documentElement.scrollTop; //获取scroll偏移值
      console.log(top);
      if (top > 45 && top <= 150) {
        //实际按需求取值范围
        const opacity = top / 150; //对opacity 作计算， 透明度从起始到1随偏移值而改变
        this.opacityStyle = { opacity }; //实际返回给opacityStyle
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.box22Scroll);
  },
};
</script>

<style scoped>
#app {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #021937;
}
.box22 {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  position: fixed;
  background-color: #f4f4f4;
  opacity: 1;
  top: 0;
  z-index: 1;
}
.box22 .icon-right-angle-copy {
  font-size: 0.2rem;
  float: left;
  margin-left: 0.16rem;
}
.box22 .icon-fenxiang2-copy-copy {
  font-size: 0.25rem;
  margin-top: 0.02rem;
  float: right;
  margin-right: 0.16rem;
}
.k {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.van-popup {
  background-color: pink;
  width: 100%;
  opacity: 0.8;
}
</style>
